<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{background-color:#98d0f8; color: #fff; text-align:center; font-size:12px;}
            body>div{margin-top:30px;}
            body>div>ul{padding:0; margin:0 auto;overflow: hidden;width: 620px;}
            body>div>ul>li{width:120px; list-style:none; border-left:dotted 1px; float:left;}
            body>div>ul>li:last-child{border-right: dotted 1px;}
    
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				var city = document.getElementById("city");
				var search = document.getElementById("search");
				
				
				search.onclick = function(){
					var Weather = new getWeather(city.value.trim());
				}
				
				function getWeather(cityName){
					this.ajaxRequest = new window.XMLHttpRequest();
					this.ajaxRequest.open('GET','http://wthrcdn.etouch.cn/weather_mini?city='+cityName,true);
					this.ajaxRequest.send();
					this.ajaxRequest.onreadystatechange = function(){
						if(this.readyState == 4 && this.status == 200){
							var responed = JSON.parse(this.responseText);
							var ul = document.createElement('ul');
							for(var i = 0; i < responed.data.forecast.length; i++){
								var currDate = responed.data.forecast[i];
								var imgIndex = 1;
								switch (currDate.type) {
		                            case '多云':
		                                imgIndex = 5;
		                                break;
		                            case '雷阵雨':
		                                imgIndex = 16;
		                                break;
		                            case '阵雨':
		                                imgIndex = 8;
		                                break;
		                        }
								var li =document.createElement('li');
								li.innerHTML += "<h4>" + currDate.date + "</h4>";
		                        li.innerHTML += "<img src='day23/img/" + imgIndex + ".png' />";
		                        li.innerHTML += "<p>" + currDate.type + "</p>";
		                        li.innerHTML += "<p>" + currDate.high.replace('高温', '') + " - " + currDate.low.replace('低温', '') + "</p>";
		                        li.innerHTML += "<p>" + currDate.fengli + "</p>";
		                        li.innerHTML += "<p>" + currDate.fengxiang + "</p>";
		                        ul.appendChild(li);
							}
							document.getElementById('container').innerHTML = "";
                            document.getElementById('container').appendChild(ul);
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<input type="text" name="" id="city" value="" />
		<input type="button" name="" id="search" value="查询" />
		<div id="container">
			
		</div>
	</body>
</html>
